<%--
  Created by IntelliJ IDEA.
  User: Admin
  Date: 2023/9/24
  Time: 13:08
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="shortcut icon" href="<%=basePath%>static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="<%=basePath%>static/css/font.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/xadmin.css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-2.1.1.min.js"></script>
    <script src="<%=basePath%>static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/xadmin.js"></script>

    <link rel="stylesheet" href="<%=basePath%>static/lib/layui/layui.css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-3.3.1.min.js"></script>
</head>
<body class="login-bg">
<style>
    .demo-reg-container {
        width: 320px;
        margin: 21px auto 0;
    }

    .demo-reg-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
    }
</style>
<div class="login">
    <div class="message">用户注册</div>
    <div id="darkbannerwrap"></div>

    <form class="layui-form" lay-filter="layui-form">
        <div class="layui-form-item">
            <input type="text" name="username" value="" lay-verify="required|checkUsername" id="username"
                   placeholder="用户名"
                   autocomplete="off" class="layui-input" lay-affix="clear">
        </div>
        <hr class="hr15">
        <input type="password" name="password" value="" lay-verify="required" placeholder="密码"
               autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
        <hr class="hr15">
        <input type="password" name="password" value="" lay-verify="required|confirmPassword"
               placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
        <hr class="hr15">
        <input type="text" name="phone" value="" lay-verify="required|phone" placeholder="手机号"
               autocomplete="off" lay-reqtext="请填写手机号" class="layui-input" id="reg-cellphone">
        <hr class="hr15">
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" id="submit" lay-filter="register">注册</button>
        </div>
        <a href="/sys/goLogin" style="padding-right: 0;">登录已有帐号</a>
    </form>

</div>

<script src="<%=basePath%>static/lib/layui/__unpkg.com_layui@2.7.6_dist_layui.js"></script>
<script type="text/javascript">
    let check = 0;
    // 监听用户名输入，查询是否重复
    $(document).ready(function () {
        // 给输入框添加失去焦点事件监听器
        $('#username').blur(function () {
            // 获取输入框的值
            var username = $(this).val();
            // 发送Ajax请求
            $.ajax({
                url: '../user/enrollCheck',  // 后端接口地址
                method: 'POST',
                data: {username: username},  // 发送的数据，这里是用户名
                success: function (response) {
                    // console.log(response);
                    // 处理后端返回的结果
                    if (response != null) {
                        check = response.code;
                    }
                },
                error: function () {
                    check = -1;
                }
            });
        });
    });
    layui.use(function () {
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;

        // 检查用户名是否重复
        form.verify({
            checkUsername: function (value, item) {
                if (check <= 0) {
                    return "用户名已被使用，请重新输入！";
                }
            }
        });

        // 自定义验证规则,两次密码是否相同
        form.verify({
            // 确认密码
            confirmPassword: function (value, item) {
                var passwordValue = $('#reg-password').val();
                if (value !== passwordValue) {
                    return '两次密码输入不一致';
                }
            }
        });

        $('#\submit').on('click', function () {
            form.submit('layui-form', function (data) {
                var field = data.field; // 获取表单全部字段值
                console.log(data); // 回调函数返回的 data 参数和提交事件中返回的一致
                // 此处可执行 Ajax 等操作
                $.ajax({
                    url: "/user/userEnroll",
                    type: "post",
                    datatype: "json",
                    contentType: "application/json",
                    data: JSON.stringify(field),
                    success: function (data) {
                        console.log(data);
                        if (data.code > 0) {
                            layer.msg(data.message, {icon: 1});
                            setTimeout(function (){
                                location.href = data.url;
                            }, 1000)
                        } else {
                            layer.msg(data.message, {icon: 2});
                            setTimeout(function (){
                                location.reload();
                            }, 1000)
                        }
                    },
                    error: function (data) {
                        alert("注册失败！");
                    }
                })
            });
            return false;
        });
    });
</script>

</body>
</html>
